<template>
  <div class="admin">
    <el-backtop :bottom="100" :visibility-height="10"> </el-backtop>
    <div class="header">
      <img
        class="homelogo"
        src="../assets/img/simtoplogo.png"
        @click="backToHome()"
      />
      <div class="firstindex">
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          background-color="#00000000"
          text-color="#fff"
          active-text-color="#fff"
        >
          <el-menu-item @click="backToHome()">
            <span style="font-size:0.17rem">首页</span>
          </el-menu-item>
        </el-menu>
      </div>
      <div class="me">
        <el-dropdown placement="bottom-start" @command="myoperation">
          <span class="el-dropdown-link">
            {{ this.userInfo.username
            }}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="a" icon="el-icon-user"
              >个人中心</el-dropdown-item
            >
            <el-dropdown-item
              command="b"
              icon="el-icon-setting"
              v-show="isadmin"
              >管理中心</el-dropdown-item
            >
            <el-dropdown-item command="c" icon="el-icon-tickets"
              >帮助文档</el-dropdown-item
            >
            <el-dropdown-item command="d" icon="el-icon-switch-button"
              >退出登录</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <div class="admincontent">
      <Layout>
        <Sider hide-trigger :style="{ background: '#fff' }">
          <Menu active-name="1" theme="light" width="auto" :open-names="['1']">
            <MenuItem name="1" to="usermanage">
              <Icon type="md-contact" />
              用户管理
            </MenuItem>
            <MenuItem name="2" to="tagmanage">
              <Icon type="ios-navigate"></Icon>
              标签管理
            </MenuItem>
            <MenuItem name="3" to="resourcemanage">
              <Icon type="ios-folder-open" />
              资源管理
            </MenuItem>
            <MenuItem name="4" to="operatemanage">
              <Icon type="ios-hand" />
              操作管理
            </MenuItem>
          </Menu>
        </Sider>
        <div class="routercontent">
          <router-view></router-view>
        </div>
      </Layout>
    </div>
  </div>
</template>
<script>
import UserApi from "../api/Userapi.js";

export default {
  data() {
    return {
      isadmin: false,
      activeIndex: "0",
      maxSize: 100000,
      userInfo: {
        password: "",
        loginAuthority: 1,
        loginName: "one",
        uploadAuthority: 0,
        downloadAuthority: 1,
        manageAuthority: 0,
        depart: "研发部",
        exp: 1482635727275,
        userId: 4,
        username: "未登录"
      }
    };
  },
  methods: {
    backToHome() {
      this.$router.push({ name: "home" });
    },
    getUsersMsg() {
      //获取用户个人信息
      this.userInfo = this.$store.state.userInfo;
      window.console.log("个人信息", this.userInfo);
      if (this.userInfo.manageAuthority === 1) {
        this.isadmin = true;
      }
    },
    myoperation(e) {
      //点击右上角用户名点击事件
      if (e) {
      }
      switch (e) {
        case "a":
          this.$router.push({ name: "me" });
          break;
        case "b":
          if (this.userInfo.manageAuthority === 1) {
            this.$router.push({ name: "admin" });
          }
          break;
        case "c":
          window.location.href = "http://192.168.0.2/simtopmanagedoc";
          break;
        case "d":
          this.$store.commit("clearToken");
          this.$router.push({ name: "login" });
          sessionStorage.removeItem("store");
          break;
        default:
          break;
      }
    }
  },
  mounted() {
    this.getUsersMsg();
  }
};
</script>
<style>
body {
  background-color: #f5f7f9;
  background-size: 100% 100%;
  width: 100%;
  position: relative;
}
#app {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #f5f7f9;
}
.admin {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #f5f7f9;
  font-family: "PingFang";
}
.header {
  position: relative;
  width: 100%;
  height: 1.2rem;
  background: url(../assets/img/header.png) no-repeat;
  background-size: 100% 100%;
  background-color: #f5f7f9;
}
.homelogo {
  position: absolute;
  display: block;
  width: 2.01rem;
  height: 0.35rem;
  left: 0.42rem;
  top: 0.43rem;
  cursor: pointer;
}
.firstindex {
  font-family: "PingFang";
  font-size: 0.18rem;
  position: relative;
  left: 3.11rem;
  min-width: 1rem;
  margin-right: 6.26rem;
  /* overflow: hidden; */
  top: 50%;
  transform: translateY(-50%);
}
.firstindex .el-menu.el-menu--horizontal {
  border-bottom: none !important;
}
.firstindex .el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
.el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
  background-color: rgba(0, 0, 0, 0) !important;
}
.me {
  position: absolute;
  width: 1.05rem;
  height: 0.5rem;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
}
.me > .el-dropdown {
  font-size: 0.18rem;
  height: 0.5rem;
  line-height: 0.5rem;
  font-family: "PingFang";
  background: #00000000;
  color: #ffffff;
  right: 0;
  left: 0;
  width: 100%;
}
.ivu-layout {
  min-height: 100%;
}
.layout {
  border: 1px solid #d7dde4;
  background: #f5f7f9;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
}
.layout-logo {
  width: 100px;
  height: 30px;
  background: #5b6270;
  border-radius: 3px;
  float: left;
  position: relative;
  top: 15px;
  left: 20px;
}
.layout-nav {
  width: 420px;
  margin: 0 auto;
  margin-right: 20px;
}
.ivu-layout-sider {
  min-height: 10.8rem;
  width: 2rem !important;
  min-width: 2rem !important;
  max-width: 2rem !important;
  flex: 0 0 2rem !important;
}
.admincontent {
  position: relative;
  height: 100%;
  width: 100%;
}
.routercontent {
  width: 17.2rem;
}
</style>
